<template>
  <view
    v-if="layout?.layout === 'FLEX'"
    :class="[ns.b(), ns.m('flex')]"
    :style="flexStyle"
  >
    <slot></slot>
  </view>
  <uni-row v-else :class="[ns.b(), ns.m('grid')]"><slot></slot></uni-row>
</template>
<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: "shared"
  },
}
</script>
<script setup lang="ts">
import { computed } from "vue";
import { useNamespace } from "@/use";
import type { IFlexLayout } from "@ibiz/model-core";
import { rowProps } from './i-biz-row'

const ns = useNamespace("row");

const props = defineProps(rowProps);

const flexStyle = computed(() => {
  return `display:flex;flex-direction: ${
    (props.layout as IFlexLayout).dir || "column"
  };justify-content: ${
    (props.layout as IFlexLayout).align || ""
  };align-items: ${(props.layout as IFlexLayout).valign || ""};`;
});
</script>
